<template>
  <view class="template-login">
    <view class="login">
      <!-- 顶部背景图片-->
      <!--      <view class="login__bg login__bg&#45;&#45;top">-->
      <!--        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>-->
      <!--      </view>-->
      <!--      <view class="login__bg login__bg&#45;&#45;top">-->
      <!--        <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>-->
      <!--      </view>-->

      <view class="login__wrapper">

        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
          <block>
            <view
                class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-phone"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :style="telephoneNumberCss" maxlength="11" placeholder-class="input-placeholder"
                       placeholder="请输入登录手机号码" v-model="telephoneNumber"/>
              </view>
            </view>

            <view
                class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-lock"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码"
                       v-model="password"/>
              </view>
              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
              </view>
            </view>
          </block>
          <!-- 注册 -->

          <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover"
                :hover-stay-time="150" @click="login">登录
          </view>
        </view>


        <!-- 底部背景图片-->
        <!--      <view class="login__bg login__bg&#45;&#45;bottom">-->
        <!--        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>-->
        <!--      </view>-->
      </view>
    </view>
<!--    <loading-->
<!--    <tn-loading :show="showLoading" size="1000"></tn-loading>-->
    <!-- 验证码倒计时 -->
    <!--    <tn-verification-code-->
    <!--      ref="code"-->
    <!--      uniqueKey="login-demo-1"-->
    <!--      :seconds="60"-->
    <!--      @change="codeChange">-->
    <!--    </tn-verification-code>-->
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import {backendLogin} from "@/apis/Login";
import {sm4Crypt} from "@/utils/sm4Utils";
import {getToken, setToken, setTokenType} from "@/utils/auth";
// import tool from "@/utils/common";

export default {
  name: 'login-demo-1',
  mixins: [template_page_mixin],
  data() {
    return {
      telephoneNumber: null,
      telephoneNumberCss: '',
      password: null,
      // 是否显示密码
      showPassword: false,
      showLoading: false
    }
  },
  watch: {
    telephoneNumber(newValue) {
      if (newValue.match(/^1[3-9]\d{9}$|^17[0-9]\d{8}$/)) {
        this.telephoneNumberCss = "color: black"
      } else {
        this.telephoneNumberCss = "color: red"
      }
    }
  },
  methods: {
    async login() {
      if (this.password) {
        const loginSuccess = await backendLogin({telephone: this.telephoneNumber, password: sm4Crypt(this.password)})
        if (loginSuccess.code && loginSuccess.data.tokenType && loginSuccess.data.accessToken) {

          setTokenType(loginSuccess.data.tokenType)
          setToken(loginSuccess.data.accessToken)
          uni.navigateTo({
            url: '/pagesMine/index/index'
          })
        }
      } else {
        // tool.toastTip("登录失败", 'none', 1500);
      }
      this.showLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.rocket-sussuspension {
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-0.8rem, 1rem);
  }
}

.login {
  position: relative;
  height: 100%;
  z-index: 1;

  /* 背景图片 start */
  &__bg {
    z-index: -1;
    position: fixed;

    &--top {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;

      .bg {
        width: 750rpx;
        will-change: transform;
      }

      .rocket {
        margin: 50rpx 28%;
        width: 400rpx;
        will-change: transform;
      }
    }

    &--bottom {
      bottom: -10rpx;
      left: 0;
      right: 0;
      width: 100%;
      // height: 144px;
      margin-bottom: env(safe-area-inset-bottom);

      image {
        width: 750rpx;
        will-change: transform;
      }
    }
  }

  /* 背景图片 end */

  /* 内容 start */
  &__wrapper {
    margin-top: 403rpx;
    width: 100%;
  }

  /* 切换 start */
  &__mode {
    position: relative;
    margin: 0 auto;
    width: 476rpx;
    height: 77rpx;
    background-color: #FFFFFF;
    box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
    border-radius: 39rpx;

    &__item {
      height: 77rpx;
      width: 100%;
      line-height: 77rpx;
      text-align: center;
      font-size: 31rpx;
      color: #908f8f;
      letter-spacing: 1em;
      text-indent: 1em;
      z-index: 2;
      transition: all 0.4s;

      &--active {
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    &__slider {
      position: absolute;
      height: inherit;
      width: calc(476rpx / 2);
      border-radius: inherit;
      box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
      z-index: 1;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }

  /* 切换 end */

  /* 登录注册信息 start */
  &__info {
    margin: 0 30rpx;
    margin-top: 105rpx;
    padding: 30rpx 51rpx;
    padding-bottom: 0;
    border-radius: 20rpx;
    background-color: #ffff;
    box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

    &__item {

      &__input {
        margin-top: 59rpx;
        width: 100%;
        height: 77rpx;
        border: 1rpx solid #E6E6E6;
        border-radius: 39rpx;

        &__left-icon {
          width: 10%;
          font-size: 44rpx;
          margin-left: 20rpx;
          color: #AAAAAA;
        }

        &__content {
          width: 80%;
          padding-left: 10rpx;

          &--verify-code {
            width: 56%;
          }

          input {
            font-size: 24rpx;
            // letter-spacing: 0.1em;
          }
        }

        &__right-icon {
          width: 10%;
          font-size: 44rpx;
          margin-right: 20rpx;
          color: #AAAAAA;
        }

        &__right-verify-code {
          width: 34%;
          margin-right: 20rpx;
        }
      }

      &__button {
        margin-top: 75rpx;
        margin-bottom: 39rpx;
        width: 100%;
        height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        font-weight: bold;
        line-height: 77rpx;
        letter-spacing: 1em;
        text-indent: 1em;
        border-radius: 39rpx;
        box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
      }

      &__tips {
        margin: 30rpx 0;
        color: #AAAAAA;
      }
    }
  }

  /* 登录注册信息 end */

  /* 登录方式切换 start */
  &__way {
    margin: 0 auto;
    margin-top: 110rpx;

    &__item {
      &--icon {
        width: 77rpx;
        height: 77rpx;
        font-size: 50rpx;
        border-radius: 100rpx;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
        }
      }
    }
  }

  /* 登录方式切换 end */
  /* 内容 end */

}

::v-deep .input-placeholder {
  font-size: 24rpx;
  color: #E6E6E6;
}

</style>
